<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工作量查询功能测试</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f8f9fa;
        }
        .test-container {
            max-width: 600px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .test-title {
            color: #667eea;
            text-align: center;
            margin-bottom: 20px;
        }
        .test-section {
            margin-bottom: 20px;
            padding: 15px;
            border: 1px solid #dee2e6;
            border-radius: 8px;
        }
        .test-section h4 {
            color: #495057;
            margin-bottom: 10px;
        }
        .btn-test {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 6px;
            cursor: pointer;
            margin: 5px;
        }
        .btn-test:hover {
            opacity: 0.9;
        }
        .result {
            margin-top: 10px;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 4px;
            font-family: monospace;
            font-size: 12px;
            max-height: 200px;
            overflow-y: auto;
        }
        .success { color: #28a745; }
        .error { color: #dc3545; }
    </style>
</head>
<body>
    <div class="test-container">
        <h2 class="test-title">
            <i class="bi bi-bar-chart"></i>
            工作量查询功能测试
        </h2>

        <div class="test-section">
            <h4>
                <i class="bi bi-link-45deg"></i>
                API接口测试
            </h4>
            <button class="btn-test" onclick="testAllWorkload()">测试 /all 接口</button>
            <button class="btn-test" onclick="testUserWorkload()">测试 /user 接口</button>
            <div id="api-result" class="result"></div>
        </div>

        <div class="test-section">
            <h4>
                <i class="bi bi-phone"></i>
                移动端访问测试
            </h4>
            <p>请在手机浏览器中访问以下地址：</p>
            <code id="mobile-url">正在生成...</code>
            <br><br>
            <button class="btn-test" onclick="copyMobileUrl()">复制地址</button>
        </div>

        <div class="test-section">
            <h4>
                <i class="bi bi-check-circle"></i>
                功能验证清单
            </h4>
            <ul>
                <li>✅ 创建工作量查询页面 (RefundTaskWorkloadQuery.vue)</li>
                <li>✅ 添加路由配置 (/workload-query)</li>
                <li>✅ 主仪表板添加入口</li>
                <li>✅ 支持按多种字段排序</li>
                <li>✅ 支持姓名搜索过滤</li>
                <li>✅ 显示当前用户工作量</li>
                <li>✅ 移动端适配样式</li>
            </ul>
        </div>
    </div>

    <script>
        // 生成移动端URL
        const mobileUrl = window.location.origin + '/refundtask/#/workload-query';
        document.getElementById('mobile-url').textContent = mobileUrl;

        // 复制移动端URL
        function copyMobileUrl() {
            navigator.clipboard.writeText(mobileUrl).then(() => {
                alert('移动端地址已复制到剪贴板');
            });
        }

        // 测试API接口
        async function testAllWorkload() {
            const resultDiv = document.getElementById('api-result');
            resultDiv.innerHTML = '正在测试 /api/RefundTaskWorkload/all...';
            
            try {
                const response = await fetch('/api/RefundTaskWorkload/all', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    }
                });
                const data = await response.json();
                
                if (data.success) {
                    resultDiv.innerHTML = `<span class="success">✅ /all 接口测试成功</span><br>获取到 ${data.data?.length || 0} 条工作量数据`;
                } else {
                    resultDiv.innerHTML = `<span class="error">❌ /all 接口测试失败</span><br>${data.message}`;
                }
            } catch (error) {
                resultDiv.innerHTML = `<span class="error">❌ 网络错误</span><br>${error.message}`;
            }
        }

        async function testUserWorkload() {
            const resultDiv = document.getElementById('api-result');
            resultDiv.innerHTML = '正在测试 /api/RefundTaskWorkload/user...';
            
            try {
                // 这里需要实际的用户名，暂时使用测试用户名
                const response = await fetch('/api/RefundTaskWorkload/user', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ username: 'test_user' })
                });
                const data = await response.json();
                
                if (data.success) {
                    resultDiv.innerHTML = `<span class="success">✅ /user 接口测试成功</span><br>用户工作量数据已获取`;
                } else {
                    resultDiv.innerHTML = `<span class="error">❌ /user 接口测试失败</span><br>${data.message}`;
                }
            } catch (error) {
                resultDiv.innerHTML = `<span class="error">❌ 网络错误</span><br>${error.message}`;
            }
        }
    </script>
</body>
</html>